<template>
	<view class="regBox">
		<view class="phone">
			<image src="../../img/shouji.png" mode=""></image>
			<input type="text" placeholder="输入手机号" v-model="data.phone" />
		</view>
		<view class="verCode">
			<input type="text" value="" placeholder="" v-model="data.captcha" />
			<button type="default" @click="yanClick">获取验证码</button>
		</view>
		<view class="phone">
			<image src="../../img/weibiaoti--.png" mode=""></image>
			<input type="text" value="输入注册密码" v-model="data.password" />
		</view>
		<view class="verCode twoVerCode">
			<button type="default" border="none">确认密码</button>
			<input type="text" value="" placeholder="再次输入登录密码" />
		</view>
		<button type="default" class="reBtn" @click="reClick">立即注册</button>
		<view class="consent">
			<checkbox-group @change="checkChange">
				<label>
					<checkbox :checked="checked" :value="checkVal" />
				</label>
			</checkbox-group>

			<text>我已同意并阅读<text class="text" @click="xieyi">《UI100用户注册协议》</text></text>
		</view>
		<text class="loginBoxFlag" v-show="loginFlag" @click="toLoginClick">是否跳转至登录？？？</text>
		<view class="mask" v-show="maskShow">
			<view class="close" @click="closeMask">
				X
			</view>
			勾选即表示你同一本协议
			<view>
				在您成为中华人民共和国中央人民政府门户网站/国务院客户端（简称“中国政府网”/“国务院客户端”）实名注册用户（简称“注册用户”）之前，请确认您已充分阅读、理解并接受本协议的全部内容，同意遵循本协议的所有约定。如您不同意本服务协议及或随时对其的补充和修改，您可以主动停止使用中国政府网/国务院客户端提供的服务；您一旦使用，即视为您已了解并完全同意本服务协议各项内容，包括中国政府网/国务院客户端对本协议随时所做的任何补充和修改。
				
				
				1.【协议适用主体范围】中国政府网、国务院客户端的运营管理权归中国政府网运行中心所有。本协议是您和中国政府网运行中心，明确双方通过中国政府网/国务院客户端查询、办理政务服务事项、网上留言等过程中的权利义务所订立的协议。订立本协议的用户，应当是具备完全民事权利能力和完全民事行为能力的自然人。
				
				
				2.【服务内容】注册用户在中国政府网/国务院客户端能够进行查询政务服务信息、申办政务服务事项等，可在专属用户空间使用我的收藏、我的留言、我的消息等个性化服务，储存信息资料，并自行维护用户信息。
				
				
				3.【注册信息提供及账号管理】注册用户的账号所有权归属中国政府网/国务院客户端，用户在注册账号时，应当按注册页面引导提供真实、准确、最新和完整的个人资料，使用本人手机号码、身份证号等个人信息进行实名验证。用户阅读并同意本协议且完成全部注册程序后，即可获得中国政府网/国务院客户端账号并成为中国政府网/国务院客户端用户，请按以下规则管理账号：
				
				  （1）不得以虚假信息或其他违法和不良信息进行注册。
				
				  （2）不得将账号、密码转让或出借予他人使用。
				
				  （3）若违反相关法律法规和本协议各项规定，中国政府网/国务院客户端有权对该用户账号单方采取暂停使用、注销登记等措施。
				
				  （4）若服务被终止或取消，中国政府网/国务院客户端可以从服务器上永久地删除该用户的数据；服务终止或取消后，中国政府网/国务院客户端没有义务向用户返还或恢复任何数据。
				
				
				4.【用户承诺和授权】注册用户在使用中国政府网/国务院客户端账号时承诺并确认：
				
				  （1）遵守中国法律和法规，遵守所有与网络服务有关的网络协议、规定和程序。
				
				  （2）不得利用中国政府网/国务院客户端进行任何可能对互联网的正常运转造成不利影响的行为。
				
				  （3）不得利用中国政府网/国务院客户端进行任何不利于中国政府网/国务院客户端的行为。
				
				  （4）用户应当对其所提供内容的真实性、合法性负责，不得出现违法和不良信息。
				
				  （5）用户同意接收中国政府网/国务院客户端推送的信息。
				
				  （6）用户上传到中国政府网/国务院客户端的除个人信息以外的文字、图片和音视频等内容，中国政府网/国务院客户端具有免费使用权。
				
				  （7）中国政府网/国务院客户端提供的网络服务内容可能包括：文字、软件、声音、图片、视频、图表等。所有这些内容受版权、商标和其他财产所有权法律的保护，用户只有在获得中国政府网/国务院客户端或其他相关权利人的授权之后才能使用这些内容。
				
				
				5.【隐私保护】中国政府网/国务院客户端依法保护个人隐私，不得违法违规向第三方提供用户注册资料，但下列情况除外：
				
				  （1）事先获得用户的明确授权；
				
				  （2）根据有关的法律法规要求；
				
				  （3）按照相关政府主管部门的要求；
				
				  （4）为维护社会公众的利益；
				
				  （5）为维护中国政府网/国务院客户端的合法权益；
				
				  （6）符合其它相关要求。
				
				
				6.【禁止条款】注册用户有违反法律法规行为的，中国政府网/国务院客户端有权终止为用户提供服务，并保留追责的权利。
				
				
				7.【注意事项】中国政府网/国务院客户端将加强网络安全管理和风险防控，因技术原因和网络中断等因素，可能会造成注册用户的实时操作无效或暂停，请注意备份相关资料。
				
				
				8.【免责声明】注册用户同意发生下列情形时，中国政府网/国务院客户端将不承担任何责任，包括但不限于：
				
				  （1）因中国政府网/国务院客户端不定期对提供网络服务的平台或相关的设备进行检修或者维护而导致的服务中断。
				
				  （2）因不可抗力、黑客攻击、病毒、木马、恶意程序攻击、网络拥堵、系统不稳定、系统或设备故障、通讯故障、电力故障、银行原因、第三方服务瑕疵等原因而导致的用户信息泄漏、服务中断及其他损失。
				
				  （3）因注册用户所发布的言论或内容涉嫌构成违法和不良信息，中国政府网/国务院客户端有权不经通知单方面采取删除、屏蔽或断开连接等措施。
				
				  （4）注册用户使用中国政府网/国务院客户端服务过程中导致中国政府网/国务院客户端或任何其他第三方产生损失的，用户应当承担全部责任。
				
				  （5）注册用户使用中国政府网/国务院客户端网络服务而产生的任何其他后果。
				
				
				9.【其他规定】
				
				  （1）用户知悉并授权中国政府网/国务院客户端在必需的情况下使用或与关联单位同步用户信息，以为用户提供征信及其他相关服务。
				
				  （2）本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。
				
				  （3）如双方就本协议内容或执行发生任何争议，双方应协商解决；协商不成时，应向中国政府网/国务院客户端运营方所在地人民法院提起诉讼解决。
				
				  （4）中国政府网/国务院客户端保留对本协议的最终解释权。
				

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRe,
		getYan,
		getShiRe
	} from '@/api/music.js';
	export default {
		data() {
			return {
				checked: false,
				checkVal: '0',
				maskShow: false,
				loginFlag:false,//底部的是否条抓至登录页面的显示与隐藏
				data: {
					phone: "", //手机号
					password: "", //密码
					nickname: "", //昵称
					captcha: "", //验证码
					
				}
			};
		},
		created() {},
		methods: {
			xieyi() {
				this.maskShow = true;
			},
			closeMask() {
				this.maskShow = false;
			},
			reClick() {
				if (this.checked) {
					getShiRe(this.data.phone).then(res => {
						console.log(res);
						if(res.data.hasPassword && res.data.code == 200 && res.data.exist === 1){
							uni.showToast({
								title:"用户已经存在，无序注册，直接登录"
							})
							this.loginFlag = true
						}
					})
					getRe(this.data).then(res => {
						console.log(res);
						uni.setStorageSync('registerData',res.data)
					})
					
				} else {
					uni.showToast({
						title: "请仔细阅读用户注册协议",
						icon: "error"
					})
				}

				
			},
			yanClick() {
				getYan(this.data.phone).then(res => {
					console.log(res);
				})

			},
			checkChange(e) {
				console.log(e);
				if (e.detail.value == '0') {
					this.checked = true
				} else {
					this.checked = false
				}
			},
			toLoginClick(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.regBox {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.phone {
		width: 99%;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 4rpx;
		border-bottom: 1px solid #c3c3c3;

		image {
			width: 70rpx;
			height: 70rpx;
			margin-right: 60rpx;
		}

		input {
			width: calc(100% - 152rpx);
			font-size: 30rpx;
			color: #b3b3b3;
		}
	}

	.verCode {
		width: 99%;
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 4rpx;
		border-bottom: 1px solid #c3c3c3;

		input {
			width: calc(100% - 208rpx);
			font-size: 30rpx;
			color: #b3b3b3;
		}

		button {
			width: 200rpx;
			height: 70rpx;
			color: #fff;
			font-size: 30rpx;
			background-color: #a453f5;
			line-height: 66rpx;
		}
	}

	.twoVerCode {
		button {
			background-color: #fff;
			color: #222;
		}

		button:after {
			border: none !important;
		}
	}

	.reBtn {
		width: 99%;
		height: 96rpx;
		font-size: 50rpx;
		color: #fff;
		background-color: #a453f5;
		line-height: 90rpx;
		margin: 50rpx 0 10rpx;
	}

	.consent {
		width: 99%;
		height: 96rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;

		.checkbox {
			width: 32rpx;
			height: 32rpx;
		}

		>text {
			margin-left: 20rpx;

			.text {
				color: #a252f3;
			}
		}
	}

	.mask {
		width: 600rpx;
		height: 800rpx;
		border-radius: 40rpx;
		border: 1px solid #a754fa;
		color: #222;
		font-size: 24rpx;
		padding: 60rpx;
		box-sizing: border-box;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow-y: auto;
		background-color: #f3f3f3;

		.close {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
		}
	}
	.loginBoxFlag{
		color: #f00;
		font-weight: bolder;
		margin-top: 30rpx;
	}
</style>
